<template>
	<view>
		<u-navbar :is-fixed="true" title="填写订单" :border-bottom='false' back-icon-size='48'></u-navbar>
		<view class="main">
			<view class="hotelInfo">
				<view class="name">
					深圳福田希尔顿酒店
				</view>
				<view class="tips">
					<text>大床</text>
					<text>无早</text>
					<text>有窗</text>
					<text>可住2人</text>
				</view>
				<view class="time">
					入住时间：14:00以后 离店时间：12:00以前
				</view>
				<view class="line"></view>
				<view class="cancel">
					<view class="top">
						<u-icon name="info-circle" color="#F16026" size="28"></u-icon>
						<text style="margin-left: 4rpx;">限时取消</text>
					</view>
					<view class="bot">
						03月13日18:00前可免费取消
					</view>
				</view>
			</view>
			<view class="tip">
				*入住时请携带有效身份证件
			</view>
			<view class="checkIn">
				<view class="label">
					入住信息
				</view>
				<view class="inputBox">
					<view class="left">
						房间数
					</view>
					<view class="right">
						<text>每间最多住2人</text>
						<u-number-box v-model="value" @change="valChange" size='20'></u-number-box>
					</view>
				</view>
			</view>
			<view class="checkIn-peo">
				<view class="label">
					<text>入住人</text><text
						style="font-weight: normal;margin-left: 10rpx;color: #999999;">每间至少填写1位入住人</text>
				</view>
				<view class="poe-ul">
					<view class="poe-li">
						<u-checkbox @change="checkboxChange" v-model="checked" shape="circle"></u-checkbox>
						<view class="info">
							<view class="name">小桌子</view>
							<view class="phone">手机号 13569895632</view>
						</view>
						<view class="edit">
							<u-icon name="edit-pen" color="#3587F7" size="32"></u-icon>
						</view>
					</view>
					<view class="poe-li">
						<u-checkbox @change="checkboxChange" v-model="checked" shape="circle"></u-checkbox>
						<view class="info">
							<view class="name">小桌子</view>
							<view class="phone">手机号 13569895632</view>
						</view>
						<view class="edit">
							<u-icon name="edit-pen" color="#3587F7" size="32"></u-icon>
						</view>
					</view>
				</view>
				<view class="add">
					<view class="add-btn" @click="navTo('../checkin')">
						<u-icon name="plus-circle" color="#3587F7" size="32"></u-icon><text>新增入住人</text>
					</view>
				</view>
			</view>
			<view class="checkIn">
				<view class="label">
					预计到店
				</view>
				<view class="inputBox">
					<view class="left">
						12：00-14：00
					</view>
					<view class="right" @click="showTime =true">
						<text>房间保留整晚</text>
						<u-icon name="arrow-right" color="#999999" size="28"></u-icon>
					</view>
				</view>
			</view>
			<view class="state">
				<view class="label">
					发票说明
				</view>
				<view class="text">
					<text style="color: #3587F7;">（平台开票），</text>离店后由爱世界开给用户。
				</view>
				<view class="label">
					预订说明
				</view>
				<view class="text">
					订单需等酒店确认后方可生效，订单确认结果以爱世界短信通知 为准，如订单不确认将全额退款至您的付款账户
				</view>
			</view>
			<view class="payBox">
				<view class="price">
					<text style="font-size: 28rpx;">¥</text>1200
				</view>
				<view class="left">
					<view class="detail" @click="moneyDetail=true">
						明细
					</view>
					<view class="payBtn" @click="showPayway =true">
						去支付
					</view>
				</view>
			</view>
		</view>
		
		<u-popup v-model="moneyDetail" closeable border-radius="16" mode="bottom">
			<view class="moneyDetail">
				<view class="title">
					费用明细
				</view>
				<view class="mon-li">
					<view class="left">
						个人支付
					</view>
					<view class="right">
						¥1200
					</view>
				</view>
				<view class="mon-li">
					<view class="left">
						2021-03-14 无餐食
					</view>
					<view class="right">
						¥132X1
					</view>
				</view>
			</view>
		</u-popup>
		
		<u-popup v-model="showTime" closeable border-radius="16" mode="bottom">
			<view class="hotelTime">
				<view class="title">
					预计到店
				</view>
				<view class="tip">
					房间保留整晚 , 14:00前到店可能需要等房 到店时间均为酒店当地时间
				</view>
				<view class="timeList">
					<view class="item">
						6:00-8:00
					</view>
					<view class="item active">
						6:00-8:00
					</view>
					<view class="item">
						6:00-8:00
					</view>
					<view class="item">
						6:00-8:00
					</view>
					<view class="item">
						6:00-8:00
					</view>
				</view>
			</view>
		</u-popup>
		
		<u-popup v-model="showPayway" mode="bottom" closeable border-radius='16'>
			<view class="payPop">
				<view class="title">
					选择支付方式
				</view>
				<view class="pay-ul">
					<view class="pay-li">
						<view class="pay-li-left">
							<image src="../../../../../static/imgs/weixinzf.png" mode=""></image>
							<text>微信</text>
						</view>
						<u-checkbox v-model="checked" shape="circle" size="30"></u-checkbox>
					</view>
					<view class="pay-li">
						<view class="pay-li-left">
							<image src="../../../../../static/imgs/zhifubaozf.png" mode=""></image>
							<text>支付宝</text>
						</view>
						<u-checkbox v-model="checked" shape="circle" size="30"></u-checkbox>
					</view>
				</view>
				<view class="pay" @click="confirmPay">
					支付
				</view>
			</view>
		</u-popup>
		
	</view>
</template>

<script>
	export default {
		data() {
			return {
				showPayway:false,
				moneyDetail:false,
				value: 1,
				checked: false,
				showTime:false,
			}
		},
		methods: {
			valChange(e) {
				console.log(e)
			},
			navTo(url){
				uni.navigateTo({
					url:url
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.main {
		padding-bottom: 130rpx;
		.hotelInfo {
			width: 100%;
			height: auto;
			background: #FFFFFF;
			padding: 0 20rpx 20rpx;

			.name {
				font-size: 32rpx;
				font-family: PingFang SC;
				font-weight: 600;
				color: #333333;
			}

			.tips {
				margin-top: 16rpx;
				font-size: 24rpx;
				font-family: PingFang SC;
				font-weight: 400;
				color: #666666;

				text {
					margin-right: 28rpx;
				}
			}

			.time {
				font-size: 12px;
				font-family: PingFang SC;
				font-weight: 400;
				line-height: 17px;
				color: #666666;
				margin-top: 8rpx;
			}

			.line {
				margin-top: 20rpx;
				width: 710rpx;
				height: 0px;
				border: 2rpx solid #F2F2F7;
			}

			.cancel {
				margin-top: 20rpx;

				.top {
					font-size: 28rpx;
					font-family: PingFang SC;
					font-weight: 400;
					color: #F16026;
				}

				.bot {
					font-size: 24rpx;
					font-family: PingFang SC;
					font-weight: 400;
					color: #999999;
					padding-left: 28rpx;
					margin-top: 6rpx;
				}
			}
		}

		.tip {
			padding-left: 28rpx;
			width: 100%;
			height: 64rpx;
			background: #DDE9FF;
			font-size: 24rpx;
			font-family: PingFang SC;
			font-weight: 400;
			line-height: 64rpx;
			color: #3587F7;
		}

		.checkIn {
			margin: 20rpx auto 0;
			width: 710rpx;
			height: 176rpx;
			background: #FFFFFF;
			border-radius: 16rpx;
			padding: 0 20rpx;

			.label {
				width: 710rpx;
				height: 88rpx;
				line-height: 88rpx;
				font-size: 28rpx;
				font-family: PingFang SC;
				font-weight: 600;
				color: #333333;
			}

			.inputBox {
				width: 100%;
				height: 88rpx;
				display: flex;
				align-items: center;

				.left {
					font-size: 28rpx;
					font-family: PingFang SC;
					font-weight: 400;
					color: #333333;
				}

				.right {
					margin-left: auto;
					display: flex;
					align-items: center;

					text {
						font-size: 28rpx;
						font-family: PingFang SC;
						font-weight: 400;
						color: #999999;
						margin-right: 10rpx;
					}
				}
			}
		}

		.checkIn-peo {
			margin: 20rpx auto 0;
			width: 710rpx;
			height: auto;
			background: #FFFFFF;
			border-radius: 16rpx;
			padding: 0 20rpx;

			.label {
				width: 710rpx;
				height: 88rpx;
				line-height: 88rpx;
				font-size: 28rpx;
				font-family: PingFang SC;
				font-weight: 600;
				color: #333333;
			}

			.poe-ul {
				.poe-li {
					width: 100%;
					height: 120rpx;
					display: flex;
					align-items: center;
					border-bottom: 2rpx solid #F2F2F7;

					.info {
						.name {
							font-size: 32rpx;
							font-family: Segoe UI;
							font-weight: 400;
							color: #333333;
						}

						.phone {
							font-size: 28rpx;
							font-family: Segoe UI;
							font-weight: 400;
							color: #999999;
						}
					}

					.edit {
						margin-left: auto;
					}
				}
			}

			.add {
				width: 100%;
				height: 120rpx;
				display: flex;
				align-items: center;
				justify-content: center;

				.add-btn {
					width: 650rpx;
					height: 66rpx;
					background: #F2F2F7;
					border-radius: 8rpx;
					font-size: 28rpx;
					font-family: Segoe UI;
					font-weight: 400;
					color: #3587F7;
					text-align: center;
					line-height: 66rpx;

					text {
						margin-left: 10rpx;
					}
				}
			}
		}
	
		.state {
			margin: 20rpx auto 0;
			width: 710rpx;
			height: auto;
			background: #FFFFFF;
			border-radius: 16rpx;
			padding: 0 20rpx 10rpx;
			.label {
				width: 710rpx;
				height: 66rpx;
				line-height: 66rpx;
				font-size: 28rpx;
				font-family: PingFang SC;
				font-weight: 600;
				color: #333333;
			}
			.text {
				font-size: 24rpx;
				font-family: PingFang SC;
				font-weight: 400;
				color: #999999;
			}
		}
	
		.payBox {
			width: 100%;
			height: 116rpx;
			background: #FFFFFF;
			position: fixed;
			bottom: 0;
			display: flex;
			align-items: center;
			justify-content: space-between;
			padding: 0 28rpx;
			.price {
				font-size: 44rpx;
				font-family: Segoe UI;
				font-weight: bold;
				color: #3587F7;
			}
			.left {
				display: flex;
				align-items: center;
				.detail{
					font-size: 24rpx;
					font-family: Segoe UI;
					font-weight: 400;
					color: #333333;
					margin-right:20rpx
				}
				.payBtn {
					width: 200rpx;
					height: 80rpx;
					background: linear-gradient(126deg, #F5B053 0%, #F8912C 100%);
					border-radius: 8rpx;
					font-size: 32rpx;
					font-family: Segoe UI;
					font-weight: 400;
					color: #FFFFFF;
					line-height: 80rpx;
					text-align: center;
				}
			}
		}
	
	}
	
	.moneyDetail {
		.title {
			width: 100%;
			height: 100rpx;
			line-height: 100rpx;
			font-size: 34rpx;
			font-family: PingFang SC;
			font-weight: 400;
			line-height: 100rpx;
			color: #333333;
			text-align: center;
		}
		.mon-li {
			padding: 0 20rpx;
			width: 100%;
			height: 88rpx;
			display: flex;
			align-items: center;
			justify-content: space-between;
			border-bottom: 2rpx solid #F2F2F7;
		}
	}
	
	.hotelTime {
		padding: 0 20rpx;
		.title {
			width: 100%;
			height: 100rpx;
			line-height: 100rpx;
			font-size: 34rpx;
			font-family: PingFang SC;
			font-weight: 400;
			line-height: 100rpx;
			color: #333333;
			text-align: center;
			border-bottom: 2rpx solid #F2F2F7;
		}
		.tip {
			font-size: 24rpx;
			font-family: PingFang SC;
			font-weight: 400;
			color: #999999;
			margin-top: 32rpx;
		}
		.timeList {
			margin-top: 32rpx;
			display: flex;
			flex-wrap: wrap;
			.item {
				width: 168rpx;
				height: 68rpx;
				background: #FFFFFF;
				border: 2rpx solid #DFDEE2;
				border-radius: 4rpx;
				font-size: 28rpx;
				font-family: PingFang SC;
				font-weight: 400;
				line-height: 68rpx;
				color: #666666;
				text-align: center;
				margin-right: 12rpx;
				margin-bottom: 14rpx;
				&:nth-child(4n) {
					margin-right: 0rpx;
				}
			}
			
			.active {
				border: 2rpx solid #3587F7;
				color: #3587F7;
			}
		}
	}
	
	.payPop {
		padding-bottom: 20rpx;
	
		.title {
			width: 375px;
			height: 100rpx;
			line-height: 100rpx;
			text-align: center;
		}
	
		.pay-ul {
			.pay-li {
				width: 694rpx;
				height: 100rpx;
				background: #FFFFFF;
				margin: 0 auto;
				display: flex;
				align-items: center;
				justify-content: space-between;
	
				.pay-li-left {
					display: flex;
					align-items: center;
	
					image {
						width: 44rpx;
						height: 44rpx;
					}
	
					text {
						font-size: 32rpx;
						font-family: Alibaba Sans;
						font-weight: 400;
						color: #333333;
						margin-left: 20rpx;
					}
				}
	
			}
		}
	
		.pay {
			width: 694rpx;
			height: 88rpx;
			background: linear-gradient(56deg, #FEA837 0%, #FF7700 100%);
			margin: 0 auto;
			border-radius: 8rpx;
			font-size: 40rpx;
			font-family: Arial;
			font-weight: 400;
			color: #FFFFFF;
			line-height: 88rpx;
			text-align: center;
			margin-top: 40rpx;
		}
	}
	
	/deep/ .u-checkbox__label {
		margin-right: 0px !important;
	}
</style>
